<template>
    <div class="login-container">
        <div class="top">
            <div class="top-box">
                <div class="top-center">
                    <!-- <img src="../assets/a.jpg" alt="fanucLogo"> -->
                </div>
            </div>
        </div>
        
        <el-form :model="ruleForm" :rules="rules2" status-icon ref="ruleForm" label-position="left" label-width="0px" class="demo-ruleForm login-page">
            <!-- <h3 class="title">系统登录</h3> -->
            <el-form-item prop="username">
                <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="用户名" clearable>
                    <template slot="prepend"><span class="fa fa-user fa-lg" style="width: 13px"></span></template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="ruleForm.password" auto-complete="off" show-password placeholder="密码" clearable @keyup.enter.native="handleSubmit('ruleForm')">
                    <template slot="prepend"><span class="fa fa-lock fa-lg" style="width: 13px"></span></template>
                </el-input>
            </el-form-item>
            <el-form-item prop="code">
                <indexIpad @isSuccess="isSuccess"></indexIpad>
                <!-- <el-input class="input-code" v-model="ruleForm.code" auto-complete="off"
                            @keyup.enter.native="submitForm('ruleForm')" placeholder="验证码"></el-input>
                        <img class="ycode" @click="changeImgCode" :src="'data:image/png;base64,'+codeObj.img64" alt=""> -->
            </el-form-item>
            <!-- <el-checkbox v-model="checked" class="rememberme">记住密码</el-checkbox> -->
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="handleSubmit('ruleForm')" :loading="logining">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import home from '@/components/home.vue';
    import indexIpad from '@/components/verificationCode/indexIpad'
    export default {
        components: {
            indexIpad
        },
        data() {
            return {
                // pwdType: 'password',
                // eyeType: 'fa fa-eye-slash fa-lg',
                rememberme: false,
                logining: false,
                ruleForm: {
                    username: 'admin',
                    password: '123456',
                    code: false,
                },
                rules2: {
                    username: [{
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }],
                    code: [{
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }, ]
                },
                checked: false
            }
        },
        mounted() {
            this.getCookie()
        },
        methods: {
            isSuccess(code) {
                this.ruleForm.code = code;
            },
            handleSubmit(event) {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        if (!this.ruleForm.code /* && this.ruleForm.code.toLowerCase() != this.codeObj.imgcode */ ) {
                            this.$message.error('请滑动解锁...');
                            return
                        }
                        this.logining = true;
                        if (this.ruleForm.username === 'admin' &&
                            this.ruleForm.password === '123456') {
                            this.logining = false;
                            sessionStorage.setItem('user', this.ruleForm.username);
                            this.$router.push({
                                path: '/nav1'
                            });
                        } else {
                            this.logining = false;
                            this.$alert('账号密码错误', '提示', {
                                confirmButtonText: 'ok'
                            })
                        }
                    } else {
                        console.log('error submit!');
                        return false;
                    }
                })
            },
            // 回车
            keyLogin(event) {
                console.log("1111", event);

                if (event.keyCode == 13) //按Enter键的键值为13  
                    this.handleSubmit; //调用登录按钮的登录事件  
            },
            /** ... */
            setCookie(name, pass, days) {
                let expire = new Date()
                expire.setDate(expire.getDate() + days)
                document.cookie = `C-username=${name};expires=${expire}`
                document.cookie = `C-password=${pass};expires=${expire}`
            },
            getCookie() {
                if (document.cookie.length) {
                    let arr = document.cookie.split('; ')
                    for (let i = 0; i < arr.length; i++) {
                        let arr2 = arr[i].split('=')
                        if (arr2[0] === 'C-username') {
                            this.ruleForm.username = arr2[1]
                        } else if (arr2[0] === 'C-password') {
                            this.ruleForm.password = arr2[1]
                            this.rememberme = true
                        }
                    }
                }
            },
            // 修改为空，天数为-1
            deleteCookie() {
                this.setCookie('', '', -1);
            }

            /** ... */
            // 登陆成功 保存帐号密码
            // if (this.rememberme) {
            //     this.setCookie(this.ruleForm.username, this.ruleForm.password, 7)
            // } else {
            //     this.deleteCookie()
            // }
        }
    };
</script>

<style lang="scss" scoped>
    .login-container {
        background: url('../assets/image/bag.jpg');
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        /**宽高100%是为了图片铺满屏幕 */
        z-index: -1;
        position: fixed;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;

        .top {
            .top-box {
                margin-top: 40px;

                .top-center {
                    padding-left: 44px;
                    line-height: 30px;

                    img {
                        vertical-align: middle;
                        width: 260px;
                    }
                }
            }
        }

    }

    .login-page {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        /* margin: 180px auto; */
        margin-left: 0px;
        /* width: 350px; */
        padding: 35px 35px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        width: 350px;
        margin: 0 auto;
        margin-top: 200px;
    }

    label.el-checkbox.rememberme {
        margin: 0px 0px 15px;
        text-align: left;
    }
</style>